<template>
    <div id="app" class="center">

        <el-form ref="modifyForm" :model="modifyForm"  class="demo-dynamic">
            <el-form-item>
                <h1>用户名：{{userName}}</h1>
            </el-form-item>
            <el-form-item>
                <el-input v-model="modifyForm.passwd" type="password" :placeholder="$t('common.passwdTip')" style="margin-top: 20px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="modifyForm.reEnterPasswd" type="password" :placeholder="$t('common.passwdTip1')" style="margin-top: 20px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%" type="success" @click="modify" round>{{$t('common.confirm')}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>



<script>

    export default {
        name: "modifyPwd",
        data(){

            return{
                modifyForm:{
                    passwd:'',
                    reEnterPasswd:''
                },
                userName:this.getStore('user'),
            }
        },

        methods:{
            modify()
            {
                if(!this.passwordCheckValidate()){
                    return;
                }

                let params = {
                    password:this.modifyForm.passwd,
                }

                this.$modifyPasswd(params).then(response =>{
                    if(response.code && response.code ===  'success'){
                        this.$message.success(this.$t('common.editSuccess'))

                        setTimeout(() => {
                            localStorage.removeItem("token")
                            this.$router.push({path: "/login"})
                        }, 1000);
                    }else{
                        this.$message.error(this.$t('common.Fail'))
                    }
                })



            },

            passwordCheckValidate() {
                if(!/^[0-9A-Za-z]{6,15}$/.test(this.modifyForm.passwd)) {
                    this.$message.error(this.$t('common.passwdCheckTip'))
                    return false;
                }else if(this.modifyForm.passwd !==this.modifyForm.reEnterPasswd ){
                    this.$message.error(this.$t('common.passwdCheckTip1'))
                    return false;
                }

                return true;
            }
        },

        mounted(){

        },
        activated(){

        },
        beforeCreate(){
        },
    }


</script>


<style lang="less" scoped>
    #login {
        width: 100%;
        height: 100vh;
        position: relative;
        background-color: #000;
        overflow: hidden;
    }

    #row{
        height: 100vh;
        position: absolute;
        width: 100vw;
    }
    .logo-login{
        text-align: center;
        padding-bottom: 20px;
        color: darkgray;
        font-size: 24px;
        font-family: cursive;
    }

    .center{
        position:absolute;
        left:5%;
        top:5%
    }

</style>